<template>
  <div>
    <div ref="myChart" id="myPieChart" :style="{ width: '100%', height: '400px' }"></div>
    <div class="pop" v-show="popShow">
      参赛城市：{{ popData.city }}<br />
      参赛总人数：{{ popData.countNum }}<br />
      在线人数：{{ popData.onlineNum }}<br />
      离线人数：{{ popData.offlineNum }}
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref, watch } from 'vue'
let internalInstance = getCurrentInstance()
let echarts = internalInstance.appContext.config.globalProperties.$echarts
const pieData = ref([
  {
    city: '深圳',
    onlineNum: 100,
    offlineNum: 200
  },
  {
    city: '北京',
    onlineNum: 40,
    offlineNum: 30
  },
  {
    city: '上海',
    onlineNum: 140,
    offlineNum: 230
  },
  {
    city: '杭州',
    onlineNum: 80,
    offlineNum: 330
  },
  {
    city: '其他',
    onlineNum: 220,
    offlineNum: 20
  }
])

// 对数据进行整理，整理成piechart所需要的数据格式
const filDate = () => {
  let _data = []
  pieData.value.forEach((item, index) => {
    _data.push({
      value: item.onlineNum + item.offlineNum,
      name: item.city
    })
  })
  return _data
}
onMounted(() => {
  const dom = document.getElementById('myPieChart')
  const myChart = echarts.init(dom) // 初始化echarts实例
  const option = {
    title: {
      text: '劳动赛事',
      //   副标题文本
      subtext: 'Labor competition',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        // 使用函数查找“深圳”
        let CityData = pieData.value.find(item => item.city === params.name)
        return `<div style="text-align:center">参赛城市：${params.name}<br/>参赛总人数：${params.value}人<br/>在线人数：${CityData.onlineNum}人<br/>离线人数：${CityData.offlineNum}人</div>`
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '赛事信息',
        type: 'pie',
        radius: '50%',
        data: filDate(pieData),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myChart.setOption(option)
  myChart.on('click', function (params) {
    popShow.value = true
    popData.value = pieData.value.find(item => item.city === params.name)
    popData.value.countNum = params.value
    console.log(params)
  })
})
let popShow = ref(false)
let popData = ref({
  city: '',
  onlineNum: 0,
  offlineNum: 0,
  countNum: 0
})
// 页面中点击其他地方，弹框消失
watch(
  () => popShow.value,
  value => {
    if (value) {
      setTimeout(() => {
        document.addEventListener('click', popClick)
      }, 0)
    } else {
      document.removeEventListener('click', popClick)
    }
  }
)
const popClick = () => {
  let dom = document.getElementsByClassName('pop')[0]
  let pieom = echarts.getInstanceByDom(document.getElementById('myPieChart'))
  console.log(pieom)
  if (!dom.contains(event.target)) {
    // 不在菜单范围，隐藏即可
    if (popShow.value) {
      popShow.value = false
      document.removeEventListener('click', popClick)
    }
  }
}
</script>
<style lang="scss">
.pop {
  position: absolute;
  bottom: 200px;
  left: 400px;
  font-size: 14px;
  color: #0a4b81;
  width: 200px;
  height: 100px;

  background-color: aliceblue;
}
</style>
